<template>
  <div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<script>
import chartSource from "@/views/chart/ChartSource";

export default {
  name: "LineChart",
  mixins: [chartSource],
  props: {
    chartData: {
      type: Object,
      default: function () {
        return { parseCounts: [], scanCounts: [] }
      }
    }
  },
  methods: {
    initOptions() {
      const xAxis = []
      const pCounts = []
      const cCounts = []
      const { parseCounts, scanCounts } = this.chartData
      parseCounts.forEach(item => {
        xAxis.push(item.date)
        pCounts.push(item.count || 0)
      })
      scanCounts.forEach(item => {
        cCounts.push(item.count || 0)
      })
      this.options = {
        // 标题
        title: {
          text: '最近任务量',
          left: 'center'
        },
        // 弹出展示
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}'
        },
        legend: {
          data: ['解析任务', '扫描任务'],
          right: 200,
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: pCounts,
            type: 'line',
            name: '解析任务',
            areaStyle: {}
          },{
            data: cCounts,
            type: 'line',
            name: '扫描任务',
          }
        ]
      };
      this.loadSource()
    }
  }
}
</script>

<style scoped>

</style>
